<template>
  <div>
    <!-- 选择付款方式 -->
    <bottomPopup ref="payPopupRef" :mask="true" title="选择付款方式">
      <div class="pay-popup-box pl10 pr10">
        <div class="pay-type-list">
          <template v-if="payments?.wechatpay == 1">
            <div class="pay-item" @click="onPayType('wechatpay')">
              <div class="flex">
                <div class="icon icon-wechatpay text-green"></div>
                <div class="ml10">微信支付</div>
              </div>
              <div
                class="icon icon-gouxuan text-red"
                v-if="payType == 'wechatpay'"
              ></div>
            </div>
          </template>
          <template v-if="payments?.walletpay == 1">
            <div class="pay-item" @click="onPayType('walletpay')">
              <div class="flex">
                <div class="icon icon-qianbao text-orange"></div>
                <div class="ml10">余额支付</div>
              </div>
              <div
                class="icon icon-gouxuan text-red"
                v-if="payType == 'walletpay'"
              ></div>
            </div>
          </template>
        </div>
        <div
          @click.stop="onPayOrder"
          class="buy-btn"
          :style="{
            background: DIYTHEME?.host_bg,
            color: DIYTHEME?.host_color,
          }"
        >
          确定支付
        </div>
      </div>
    </bottomPopup>
  </div>
</template>
<script lang="ts">
export default {
  name: "pay-modal",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue";
import bottomPopup from "@/components/ui/bottom-popup/index.vue";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";

const { DIYTHEME, payments } = storeToRefs(useConfig());

const emit = defineEmits(["change", "toPay"]);

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    type?: string;
  }>(),
  {
    type: "",
  }
);

const payType = ref<string>(props.type);

const onPayType = (type: string) => {
  payType.value = type;
};

const _param = ref<Function>();

// 付款
const onPayOrder = () => {
  emit("toPay", {
    param: _param.value,
    pay_type: payType.value,
  });
  proxy?.$refs["payPopupRef"].close();
};

const payPopupRef = ref<HTMLElement>();

const open = (param: any) => {
  _param.value = param;
  proxy?.$refs["payPopupRef"].open();
};

defineExpose({ open });
</script>

<style scoped>
.pay-item {
  height: 120rpx;
  line-height: 120rpx;
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  line-height: 100rpx;
  width: 100%;
}
.pay-item .icon {
  font-size: var(--base-size-large-xx);
}
.pay-item .icon {
  width: 100rpx;
  text-align: center;
}
.buy-btn {
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 20rpx;
  border-radius: var(--base-radius-default);
  margin-top: 20rpx;
  margin-bottom: 30rpx;
  flex: 1;
  text-align: center;
}
</style>